﻿@model Scrum.SwimLanes.Models.ClientWorkItemList
@{
    var teamProjectName = ViewData["TeamProjectName"].ToString();
    ViewBag.Title = "Scrum.SwimLanes - " + teamProjectName + " - Sprint Backlog View";
    var sprintsToTrack = Scrum.SwimLanes.Models.SettingsHelper.TeamProjectSprintMap[teamProjectName] as List<int>;
    int sprintNumber = 1;
    if (ViewData["SprintNumber"] == null)
    {
        sprintNumber = sprintsToTrack.OrderByDescending(i => i).First();
        ViewData["LatestSprintNumber"] = sprintNumber;
    }
    else
    {
        sprintNumber = Convert.ToInt32(ViewData["SprintNumber"].ToString());
    }
}
<br />
<br />
<ul id="menu">
    @{foreach (var item in sprintsToTrack)
      {
          string selectedClass = default(string);
          if (item.Equals(sprintNumber))
          {
              selectedClass = "viewStyleTabSelected";
          }
        <li>@Html.ActionLink("Sprint " + item, "TeamProject", "Home", new { tp = teamProjectName, iType = "Sprint", sNo = item }, new { @class = selectedClass })</li>  
      }
    }
</ul>
<ul id="menu">
    <li>@Html.ActionLink("Product Backlog Items", "TeamProject", "Home", new { tp = teamProjectName, iType = "Product", sNo = sprintNumber }, null)</li>
    <li>@Html.ActionLink("Sprint Backlog Items", "TeamProject", "Home", new { tp = teamProjectName, iType = "Sprint", sNo = sprintNumber }, new { @class = "viewStyleTabSelected" })
    </li>
</ul>

<ul class="column" id="swimLanes">
    <!--Repeating list item-->
    <li>
        <div class="block" style="background-color: #FFFFFF;">
            <div class="headerStyle">
                Not Done</div>
            <!--Content-->
            <ul data-bind='template: { 
                            name: "workItemTemplate", 
                            foreach: notDone,
                            beforeRemove: function(elem) { $(elem).slideUp() },
                            afterAdd: function(elem) { $(elem).hide().slideDown() } 
                            }'>
            </ul>
            @*<span class="itemCountStyle">(<span data-bind="text: notDone().length"></span> items)</span>*@
        </div>
    </li>
    <!--end repeating list item-->
    <!--Repeating list item-->
    <li>
        <div class="block" style="background-color: #FFFFFF;">
            <div class="headerStyle">
                In Progress</div>
            <!--Content-->
            <ul data-bind='template: { 
                            name: "workItemTemplate", 
                            foreach: inProgress,
                            beforeRemove: function(elem) { $(elem).slideUp() },
                            afterAdd: function(elem) { $(elem).hide().slideDown() } 
                            }'>
            </ul>
            @*<span class="itemCountStyle">(<span data-bind="text: inProgress().length"></span> items)</span>*@
        </div>
    </li>
    <!--end repeating list item-->
    <!--Repeating list item-->
    <li>
        <div class="block" style="background-color: #FFFFFF;">
            <div class="headerStyle">
                Done</div>
            <!--Content-->
            <ul data-bind='template: { 
                            name: "workItemTemplate", 
                            foreach: done,
                            beforeRemove: function(elem) { $(elem).slideUp() },
                            afterAdd: function(elem) { $(elem).hide().slideDown() } 
                            }'>
            </ul>
            @*<span class="itemCountStyle">(<span data-bind="text: done().length"></span> items)</span>*@
        </div>
    </li>
    <!--end repeating list item-->
</ul>
<script type="text/x-jquery-tmpl" id="workItemTemplate"> 
{{if Status == "Not Done" }}
<li class="notDone">
{{/if}}
{{if Status == "In Progress" }}
<li class="inProgress">
{{/if}}
{{if Status == "Done" }}
<li class="done">
{{/if}}
    <div data-bind="text: Title" class="titleStyle"/></br/> 
    <div class="more">
    <span data-bind="text: Id"/> (<span data-bind="text: EstimatedEffort"/> hrs)<br/>
    <span data-bind="text: AssignedTo"/><br/>    
    {{if Status == "Not Done" }}
        <a href="#" data-bind='click: function() { workItemsViewModel.changeStatus($data, "In Progress") }'><span title="Move to InProgress">To InProgress >></span></a>
    {{/if}}
    {{if Status == "In Progress" }}
        <a href="#" data-bind='click: function() { workItemsViewModel.changeStatus($data, "Done") }'><span title="Move to Done">To Done >></span></a><br/>
        <a href="#" data-bind='click: function() { workItemsViewModel.changeStatus($data, "Deleted") }'><span title="Move Back to Not Done"><< To Not Done</span></a>
    {{/if}}
    {{if Status == "Done" }}
        <a href="#" data-bind='click: function() { workItemsViewModel.changeStatus($data, "In Progress") }'><span title="Move Back to InProgress"/><< To InProgress</span></a><br/>
    {{/if}}
    </div>
</li>
</script>
@* 
    // Use the following if you don't want to ajaxify the items, and load from Model being passed from Controller   
    var notDoneItems = @(new HtmlString(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model.NotDoneItems)));
    var inProgressItems = @(new HtmlString(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model.InProgressItems)));
    var doneItems = @(new HtmlString(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model.DoneItems)));
*@
<script type="text/javascript">
    var notDoneItems;
    var inProgressItems;
    var doneItems;

    $(document).ready(function () {
        updateItemsFromPolling(); // this is the first time, on document load
        if($.cookie("swimLaneStyle") == "horizontal") setHorizontal();
    });

    $.ajaxSetup({"error":function(XMLHttpRequest,textStatus, errorThrown) {   
      alert(XMLHttpRequest.responseText);
      alert("Aw... Snap! you may not have read-access to this TeamProject, Please contact your TFS Admin");
    }});

    setInterval("updateItemsFromPolling()", 300000); // subsequent calls for polling

    function updateItemsFromPolling() {
        $("#loadingSpan").css("visibility", "visible");
                $.getJSON('@Url.Action("GetSprintBacklogItems")',
                { tp: '@(ViewData["TeamProjectName"])', sNo: @(sprintNumber)},
                function (jsonData) {
                    workItemsViewModel.notDone(jsonData.NotDoneItems);
                    workItemsViewModel.inProgress(jsonData.InProgressItems);
                    workItemsViewModel.done(jsonData.DoneItems);
                    $("#loadingSpan").css("visibility", "hidden");
                });
    }

    function updateClientView(workItem, newStatusString){        
            if(newStatusString == "Deleted"){
            if(workItem.Status == "In Progress"){
                workItemsViewModel.inProgress.remove(workItem);
            }                
            workItem.Status = "Not Done";
            workItemsViewModel.notDone.push(workItem);
        }

        if(newStatusString == "In Progress"){
            if(workItem.Status == "Not Done"){
                workItemsViewModel.notDone.remove(workItem);
            }
            if(workItem.Status == "Done"){
                workItemsViewModel.done.remove(workItem);
            }
            workItem.Status = "In Progress";
            workItemsViewModel.inProgress.push(workItem);
        }

        if(newStatusString == "Done"){                
            if(workItem.Status == "In Progress"){
                workItemsViewModel.inProgress.remove(workItem);
            }
            workItem.Status = "Done";
            workItemsViewModel.done.push(workItem);
        }        
    }

    var workItemsViewModel = {
        notDone : ko.observableArray(notDoneItems),
        inProgress : ko.observableArray(inProgressItems),
        done : ko.observableArray(doneItems),        
        // Operations
        changeStatus : function(workItem, newStatusString) {
            $("#loadingSpan").css("visibility", "visible");
            //ko.utils.postJson(location.href + "Home/ChangeStatus", { workItemId: workItem.Id, newStatus: workItem.Status});
            // JSON.stringify works in Chrome but not in IE7 compatibility mode or lower.. Fix: adding JSON2.js
            var workItemToChange = JSON.stringify({ tp: '@(ViewData["TeamProjectName"])', sNo: @(sprintNumber), wId: workItem.Id, nStatus: newStatusString});
            $.ajax({ 
                type        : "post", 
                contentType : "application/json", 
                url         : '@Url.Action("ChangeStatus")', 
                data        : workItemToChange, 
                dataType    :    "json",
                success     : function(isStatusChangeSuccessful) {                     
                                    if(isStatusChangeSuccessful == true){
                                        updateClientView(workItem, newStatusString);
                                    }
                                    else{
                                        alert("Aw... Snap! you may not have write-access to this TeamProject, nothing was changed");
                                    }
                                    $("#loadingSpan").css("visibility", "hidden");
                                }
                });
        }
    };

    ko.applyBindings(workItemsViewModel, swimLanes);

    function setHorizontal(){
        $("ul.column li").animate({ width: '100%' } );
        $("ul.column li ul li").animate({ width: "110px"});
        $(".block").animate({ height : "250px"});
        $(".block ul").animate({height: "215px"});        

        $.cookie("swimLaneStyle", "horizontal");
        $("#viewStyleDiv a").toggleClass("viewStyleTabSelected");

    }

    function setVertical(){
        $("ul.column li").animate({ width : "33%"});
        $("ul.column li ul li").animate({ width : "110px"});
        $(".block").animate({ height : "740px"});  
        $(".block ul").animate({ height : "705px"});
        
        $.cookie("swimLaneStyle", "vertical");
        $("#viewStyleDiv a").toggleClass("viewStyleTabSelected");
    }
</script>
